<!-- 该组件用于显示独立的bpmn视图，不依赖于其他组件或状态管理工具 -->
<template>
  <div class="bpmn-viewer" ref="independViewer"> </div>
</template>

<script>
import Viewer from 'bpmn-js/lib/Viewer';

export default {
  name: 'IndependViewer',
  props: {
    xml: {
      type: String,
      default: ''
    },
    processNodes: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      modeler: null
    };
  },
  async mounted() {
    this.initViewer(this.$refs.independViewer);
    await this.createNewDiagram(this.xml);
    this.drawViewer();
  },
  methods: {
    async createNewDiagram(newXml, settings) {
      try {
        const { warnings } = await this.modeler.importXML(newXml);
        // 设置流程图自适应
        const canvas = this.modeler.get('canvas');
        canvas.zoom('fit-viewport', 'auto');
        if (warnings && warnings.length) {
          warnings.forEach((warn) => console.warn(warn));
        }
      } catch (e) {
        console.error(`[Process Designer Warn]: ${typeof e === 'string' ? e : e.message}`);
      }
    },
    initViewer(designer) {
      const options = {
        container: designer
      };
      const viewer = new Viewer(options);
      this.modeler = viewer;
    },
    drawViewer() {
      if (this.processNodes) {
        const { finishedLineList, finishedNodeList, currentNodeList } = this.processNodes;
        this.setProcessStatus(finishedLineList, finishedNodeList, currentNodeList);
      }
    },
    // 设置流程图元素状态
    setProcessStatus(finishedSequenceFlowSet, finishedTaskSet, unfinishedTaskSet) {
      console.log('finishedSequenceFlowSet', finishedSequenceFlowSet, finishedTaskSet, unfinishedTaskSet);
      const viewer = this.modeler;
      const canvas = viewer.get('canvas');
      const elementRegistry = viewer.get('elementRegistry');
      if (Array.isArray(finishedSequenceFlowSet)) {
        finishedSequenceFlowSet.forEach((item) => {
          if (item != null) {
            const { activityId } = item;
            const element = elementRegistry.get(activityId);
            if (element) {
              canvas.addMarker(activityId, 'success');
              const conditionExpression = element.businessObject.conditionExpression;
              if (conditionExpression) {
                canvas.addMarker(activityId, 'condition-expression');
              }
            }
          }
        });
      }
      if (Array.isArray(finishedTaskSet)) {
        finishedTaskSet.forEach((item) => {
          if (item != null) {
            const { activityId } = item;
            const element = elementRegistry.get(activityId);
            if (element) canvas.addMarker(activityId, 'success');
          }
        });
      }
      if (Array.isArray(unfinishedTaskSet)) {
        unfinishedTaskSet.forEach((item) => {
          if (item != null) {
            const { activityId } = item;
            const element = elementRegistry.get(activityId);
            if (element) canvas.addMarker(activityId, 'current');
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../Viewer/index.scss';
</style>